<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .door-box {
                height: 628px;
                margin: 0 0 40px;
                font-family: STHeiTi, SimHei;
                overflow: hidden;
                position: relative;
                z-index: 1;
            }
            .door-box.open {
                animation: flyIntoRoom 1s 1.5s both;
            }
            .door-box div {
                position: absolute;
            }
            .wall {
                left: 0; top: 0; right: 0; bottom: 0;
                margin: 0 auto;
                max-height: calc(1.8 * (100vw - 80px));
                background-color: #661f12;
                background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
                linear-gradient(155deg, #d00 23px, transparent 23px),
                linear-gradient(335deg, #b00 23px, transparent 23px),
                linear-gradient(155deg, #d00 23px, transparent 23px);
                background-size: 58px 58px; 
                background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
                border-bottom: 3px solid #000;
            }
            .door-border {
                top: 60px; left: 40px; right: 40px; bottom: 0;
                max-width: 600px;
                border: 3px solid #79320A;
                border-radius: 2px 2px 0 0;
                border-bottom: 0;
                background-color: #8D4B11;
                margin: auto;
            }
            .door-frame {
                top: 10px; left: 9px; right: 9px; bottom: 0;
                border: 3px solid #421A00;
                border-radius: 2px 2px 0 0;
                border-bottom: 0;
                background-color: #fff;
                -webkit-perspective: 1200px;
                perspective: 1200px;
            }
            .door {
                width: 50%;
                top: 0; bottom: 0;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                transform: rotateY(0deg);
                transition: transform 1.5s;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            .door-left {
                transform-origin: left;
                left: 0;
            }
            .door-right {
                transform-origin: right;
                right: 0;   
            }
            .open .door-left {
                transform: rotateY(-90deg); 
            }
            .open .door-right {
                transform: rotateY(90deg);  
            }
            /* 门环 */
            .door::before {
                content: '';
                position: absolute;
                width: 40px; height: 50px;
                background-color: #714F23;
                box-shadow: 0 0 5px rgba(0,0,0,1), inset 0 0 2px rgba(0,0,0,1);
                top: 0; bottom: 0;
                border-radius: 2px;
                margin: auto;
                z-index: 1;
            }
            .door-left::before {
                right: 3px;
            }
            .door::after {
                content: '';
                position: absolute;
                width: 26px; height: 26px;
                border: 5px solid #735835;
                top: 0; bottom: 0;
                border-radius: 50%;
                filter: drop-shadow(1px 1px 2px rgba(0,0,0,1)); 
                transform: translateY(5px);
                margin: auto;
                z-index: 1;
            }
            .door-left::after {
                right: 5px; 
            }
            .door-right::after {
                left: 2px;  
            }

            /* 门的几个面 */
            .door-face-1,
            .door-face-0 {
                left: -3px; top: -3px; right: -3px; bottom: -3px;
                border: 3px solid #1a0a00;
                background-color: #2C1000;
                background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%),
                linear-gradient(90deg, rgba(0,0,0,.13) 50%, transparent 50%),
                linear-gradient(90deg, transparent 50%, rgba(0,0,0,.17) 50%),
                linear-gradient(90deg, transparent 50%, rgba(0,0,0,.19) 50%);
                background-size: 13px, 29px, 37px, 53px;
            }
            .door-face-0 {
                transform: translateZ(-12px);
            }
            .door-face-1 {
                transform: translateZ(0);
            }
            .door-face-2 {
                height: 6px;
                left: -3px; right: -3px; top: 0;
                border: 3px solid #1a0a00;
                border-radius: 2px;
                background-color: #2B1201;
                transform: translate3D(0, -7.5px, -6px) rotateX(90deg);
            }
            .door-face-3 {
                width: 6px; top: -3px; right: 0; bottom: -3px;
                border: 3px solid #1a0a00;
                border-radius: 2px;
                background-color: #2B1201;
                transform: translate3D(7.5px, 0, -6px) rotateY(90deg);
            }
            /*按钮*/
            .door-btn {
                left: 0; right: 0;
                text-align: center;
                margin-top: 320px;
                font-size: 24px;
                line-height: 36px;
            }
            .door-in {
                display: inline-block;
                width: 104px; height: 40px;
                border-radius: 40px;
                border: 2px solid;
                line-height: 40px;
                background-color: #eacc86;
                font-size: 24px;
                color: inherit;
            }
            .door-in:hover {
                text-decoration: none;  
            }
            /* 动画 */
            @keyframes flyIntoRoom {
                from {
                    transform: scale(1) translateZ(0);
                    opacity: 1;
                }
                to {
                    transform: scale(2) translateZ(100px);
                    opacity: 0;
                }
            }
            .room-img {
                position: absolute;
                width: 375px; height: 533px;
                max-width: calc(100vw - 80px);
                max-height: calc(1.4 * (100vw - 80px));
                left: 0; right: 0; top: 44px;
                margin: auto;
            }
            .show{
                padding-bottom: 20px;
            }
            *{
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div class="show" style="position:relative; background-color:#1e0703;">
        <div id="doorBox" class="door-box">
            <div class="wall">
                <div class="door-border">
                    <div class="door-frame">
                        <!-- 左门 -->
                        <div class="door door-left">
                            <!-- 门后 -->
                            <div class="door-face-0"></div>
                            <!-- 三个面 -->
                            <div class="door-face-2"></div>            
                            <div class="door-face-1"></div>
                            <div class="door-face-3"></div>
                        </div>
                        <!-- 右门 -->
                        <div class="door door-right">
                            <!-- 门后 -->
                            <div class="door-face-0"></div>
                            <!-- 三个面 -->
                            <div class="door-face-2"></div>            
                            <div class="door-face-1"></div>
                            <div class="door-face-3"></div>
                        </div>
                        <!-- 进入按钮 -->
                        <div class="door-btn">
                            <button id="doorBtnIn" class="door-in">开门</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 书房 -->
        <img src="https://www.zhangxinxu.com/study/201806/xxsh.png" class="room-img">
        <div hidden><audio id="audioOpen" src="https://www.zhangxinxu.com/study/201806/open.mp3" preload></audio></div>
        </div>
        <script>
            var eleDoorBox = document.getElementById('doorBox');
            // 开门音效mp3
            var eleAudioOpen = document.getElementById('audioOpen');
            // 点击按钮
            document.querySelector('#doorBtnIn').addEventListener('click', function () {
                this.style.display = 'none';
                eleAudioOpen.play();
                eleDoorBox.classList.add('open');
            });
        </script>
    </body>
</html>